<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文章</title>
<meta name="keywords" content="前端模板">
<meta name="description" content="前端模板"> 
 
  
<script src="static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="static/layui/layui.js" type="text/javascript"></script>
<script src="static/js/index/index.js" type="text/javascript"></script>
<script src="static/js/index/freezeheader.js" type="text/javascript"></script>
<script src="static/layui/lay/modules/layer.js" type="text/javascript"></script>
<script src="static/js/index/sliders.js" type="text/javascript"></script>
<script src="static/js/index/html5.js" type="text/javascript"></script>
<script src="static/js/index/article.js" type="text/javascript"></script>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="static/layui/css/modules/layer/default/layer.css"/>
<link rel="stylesheet" href="static/css/global.css"/>
<link rel="stylesheet" href="../css/global.css"/>
</head>
<body>
 

<div class="layui-container container" id="saveTr">

    <div class="layui-row layui-col-space20">
        <div class="layui-col-md8">
            <div>
              <span class="layui-breadcrumb">
          <a href="index.html">首页</a>
          <a><cite>文章</cite></a>
        </span>
                <hr class="layui-bg-red">
             <!--   <div   id="saveTr">-->
                   <div class="article-list" style="padding-top:10px;" v-for="(a,index) in pageArr">
                    	<!--<img src="images/upload/article/20150910/1441852942085.jpg" /> -->
                    <figure><img :src="a.imageUrl"> </figure>
                   
                    <ul>
                        <h3>
                         <a href="article_details.html" @click="edit(a.articleId)"  >
                    	<p>{{ a.title }}</p></a>
                        </h3>
 								
                        	<p>{{ a.author }}</p>
							<p>{{ a.summary }}</p>			
                        <p class="autor">
                        	
                            <span class="lm f_l">点赞{{a.praiseCount}}</span>
                            <span class="dtime f_l">{{a.publishTime}}</span>
                            <span class="viewnum f_r">浏览  {{a.clickNum}}</span>
                            <span class="pingl f_r">评论（<a href="#">{{a.commentNum}}</a>）</span></p>
                    </ul>
                </div>
          
   
            </div>
                <div class="paging" id="pageHelper">
							<a href="#" @click="first" title="">首</a>
							<a id="backpage" @click="last" href="#" title="">&lt;</a>
							<a id="nextpage" href="#" @click="next" title="">&gt;</a>
							<a href="#" @click="end" title="">末</a>
								<div class="layui-inline layui-show-xs-block">
									<input type="text" id="num" size="1" style="height: 25px;"  class="layui-input">
								</div> 
								<a href="#" @click="tz" title="">跳转</a>
							 共：<span id="sp">{{this.totalPage}}</span>页
							<div class="clear"></div>
						</div>
                            
        </div>
        
        <div class="layui-icon-praise"></div>
        <div class="layui-col-md4">
            <div class="article-fenlei">
                <h3>文章分类</h3>
            
            </div>
    
            <div class="ad"><img src="static/images/ad.jpg"></div>
            
         
            
            <div class="ms-main" id="ms-main" >
            	 
                <div style="display: block;" class="bd bd-news"  >	
                    <ul>
                        <li v-for="ac in are">
                        	<a href="article_details.html" @click="edit(ac.articleId)" target="_blank"> 
                        		{{ac.title}}
                        	</a>
                        </li>
                    </ul>
                   </div>
               
            </div>
             
    </div>
</div>
</div>
  
 

		<script type="text/javascript" src="../js/jquery.min.js"></script>
	 	<script src="../js/vue.js" type="text/javascript"></script>
		<script src="../js/vue.min.js"></script>
	 
		<script src="../js/axios.min.js"></script>
		<script src="../js/jquery.cookie.js" type="text/javascript" ></script>
		<script src="../js/pageHelp.js"></script>
		<script>  
			const saveTr = new Vue({ 
				el: "#saveTr",
				data: {
					article: [],
					are:[],
					page: 1, //当前页
				    totalPage: 0 ,//总页数
				    pageArr: [] //中间值，循环所用的数据
				},
				methods: {
						//首页
					first: function() {
						this.page = 1;
						this.pageArr = pageHelp(this.article, 5, 1);
					},
					//上一页
					last: function() {
						this.page = this.page - 1;
						if(this.page <= 1) {
							layer.msg("已经第一页了")
							this.page=1;
						}
						this.pageArr = pageHelp(this.article, 5, this.page);
					},
					//下一页
					next: function() {
						this.page = this.page + 1;
						console.log(this.page)
						if(this.page >= this.totalPage) {
						layer.msg("已经最后一页了")
							this.page=this.totalPage;
						}
						this.pageArr = pageHelp(this.article, 5, this.page);
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.pageArr = pageHelp(this.article, 5, this.totalPage)
					},
					
					//跳转页面
					tz: function() {
						var num=$("#num").val();
						if(num>this.totalPage||num<1){
						layer.msg("请输入正确的页数")	
						$("#num").val("");
						
						}
						this.pageArr = pageHelp(this.article, 5, num)
						$("#num").val("");
					},
					
					edit:function(articleId){			 		 
			 		  $.cookie("articleId",articleId);  
					}
				},
				created:function() {
					axios.defaults.headers.common["token"] = localStorage.getItem("token")
					let _this = this;
					axios.get("http://localhost:9095/user/e/listAll").then(function(response) {
					console.log(response.data.data);
						_this.article = response.data.data;
						_this.are = response.data.data;
						_this.pageArr = _this.article; //数据长度
						
						_this.totalPage = Math.ceil(_this.pageArr.length / 5) //总页数
					    _this.first();
						
						
					});				
				}
			})
			
				layui.use(['laydate', 'form'], function() {
			var laydate = layui.laydate;
			var form = layui.form;

			//执行一个laydate实例
			laydate.render({
				elem: '#start' //指定元素
			});

			//执行一个laydate实例
			laydate.render({
				elem: '#end' //指定元素
			});
		});
		</script>

 

</body>
</html>
